import React, {FC, PropsWithChildren, useEffect, useRef, useState, MutableRefObject} from 'react';
import {Row, Col, Layout, Image, Button, Divider, ModalFuncProps} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import {addScene, getScenes, getWidgets} from "../../services";
import AddSceneModal from "./AddSceneModal";
import "./scenes-style.less"
import {useNavigate} from "react-router-dom";


const SidebarLayout: FC<PropsWithChildren> = () => {
  const [scenes, setScenes] = useState<any[]>([null]);
  const [addSceneVisible, setSceneVisible] = useState<boolean>(false);
  const navigate = useNavigate();
  const sceneRef = useRef<{ setVisible: (open: boolean) => void }>();

  const loadScenes = async () => {
    const { data, code } = await getWidgets()
    console.log('onAddScene: => ', { data, code })
    if (code === 200 && data) {
      setScenes([null, ...data])
    }
  }

  const onAddScene = async () => {
    console.log(sceneRef)
    sceneRef?.current?.setVisible(true)
  }

  useEffect( () => {
    loadScenes()
  }, []);

  console.log('scenes: => ', scenes)
  return (
    <Layout.Content>
      <Row gutter={[10, 10]}>
        {
          scenes.map((scene, key) => {
            if (scene) {
              return (
                <Col span={4} key={key}>
                  <div className="bst-scene-figure" onClick={() => navigate(`/scene/${scene.id}`)}>
                    <Image
                      width={'100%'}
                      height={'100%'}
                      preview={false}
                      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    />
                    <div className="bst-scene-figcaption">{scene.name}</div>
                  </div>
                </Col>
              )
            } else {
              return (
                <Col span={4} key={key}>
                  <div className="bst-add-scene" onClick={onAddScene}>
                    <div className="bst-add-scene-icon">
                      <PlusOutlined /> 新增
                    </div>
                    <div className="bst-add-scene-figcaption">全部：{scenes.length - 1}</div>
                  </div>
                </Col>
              )
            }
          })
        }
      </Row>
      <AddSceneModal
        ref={sceneRef}
      />
    </Layout.Content>
  );
};

export default SidebarLayout;
